O objetivo desta página e mostrar como alinhar textos numa página web de todas as maneiras, quando ele está sozinho ou acompanhado de elementos de mesma natureza (textos).

As tags e seus respectivos parâmetros tem uma 'afinidade' embutida nelas, ou seja, um campo de atuação. O x da questão é onde elas atuam e onde deixam de atuar.

Por exempo, um parâmetro text-align claramente deve afetar textos de uma tag, mas se uma tag parágrafo for a container ( dentro dela tiver ) de uma tag img ( imagem ) o que vai acontecer ?
Só o texto será afetado ou a imagem também será afetada ?

O intuíto deste documento é analisaremos apenas textos para que fique o mais claro possível como os textos são tratados no html e, posteriormente em outro documento, farei a mesma pesquisa para tags contendo imagens e textos, unindo tudo. Começaremos com o mais simples e assim que soubermos como o mais simples funciona vamos para o mais difícil.

Se você deseja ver o documento que trato do alinhamento de imagens na página HTML Clique aqui

Como o objetivo é aprender como o html trata os textos não usarei recursos 'externos' ao browser como grid do bootstrap nem de nenhum outro framework. Faremos isso na unha, sem ajuda de nada além dos recursos mais simples do browser e o mais simples possível da css e iremos até os recursos mais sofisticados como estilo flex.

Se você desenvolve apps web sabe que o problema não é só alinhar os textos na página mas sim alinhar ele um conjunto de elementos heterogêneos como imagens junto com textos e links,etc onde, muitas vezes, o posicionamento de um elemento acaba interferindo no outro.

É uma tarefa difícil porque os elementos 'brigam' pelo seu devido espaço no documento html e temos, por um lado muitos recursos a nossa disposição e por outro lado muitas variáveis de apresentação como tamanho da tela, orientação ( retrato/ paisagem). Precisamos escolher entre eles qual é o que mais se adequa as nossas necessidades O objetivo deste documento é poupar seu tempo com as experiências até dar certo com uma leitura resumindo o que você precisa saber sobre o assunto.

Mas não deixaremos os detalhes mais importantes de fora como quando o documento é responsivo...algumas quebras são desastrosas se não forem trabalhadas corretamente. O que fica bonito numa tela grande muitas vezes fica ilegível numa tela do celular. Um alinhamento que é quebrado ao reduzir a tela fica muito ruim muitas vezes.

Considerações iniciais

Todos sabemos que uma coisa é alinhar um texto numa página HTML outra muito diferente é fazer com que esse texto fique bonito como uma opção de um menu no topo de uma página. É o mesmo texto mas os recursos são bem diferentes.

Pelo html o texto é um item inline, ou seja, é exibido na mesma linha sempre que é possível e o espaço que ele ocupa é 'alocado' dinamicamente definido pelo browser no momento de renderização do objeto, ou seja, o texto ocupa somente o espaço necessário para ser exibido. Se a letra é pequena ocupará um espaço bem menor de quando a letra é grande.

Explicando melhor, podemos colocar um texto ao lado de outro, de outro...de quantos quisermos e couberem na mesma linha. Se você fizer a experiência colocando texto e mais texto na mesma linha vai ver que vai chegar uma hora o texto não caberá na linha corrente e ele será colocado na linha a seguir, como um processador de texto comum. Ao reduzirmos a largura da tela do browser podemos destacar esse problema porque o browser irá renderizar o texto automaticamente dependendo da largura da tela.

Normalmente a quebra de textos é feita pelo espaço entre as palavras. Contudo o problema é bem maior que isso quando, por exemplo, não queremos que o texto seja quebrado no espaço entre o texto como numa sigla... é por isso que existe o espaço e o   que é um espaço que não deve ser quebrado.

Sendo assim, cada elemento texto (inline) tem um tamanho 'desconhecido' até sua renderização. Digamos que o browser exibe conforme 'aparece'.

E aí está o grande problema, se eu estou exibindo alguns textos e tentando alinhar eles de maneira que eles ocupem áreas específicas da linha (direita, centro, esquerda), como esperar que o browser faça esse 'alinhamento' se o browser não sabe quanto espaço o primeiro ocupará, nem o segundo, terceiro, etc? Concorda comigo que o browser não conseguirá alinhar um texto no centro da linha se na exibição do texto anterior o texto já passou do centro da tela?

Outro detalhe, se na mesma linha eu exibo 2 textos com tamanhos de fontes de letras muito diferentes...o que vai acontecer...haverá um espaço vertical enorme entre a linha anterior e o texto com fonte pequeno porque o tamanho da linha será dado pelo elemento com a maior fonte de letra. Veja o exemplo abaixo - coloquei uma margem azul para delimitar bem o elemento.

Exibindo uma fonte de letra muito pequena ao lado de uma muito grande

Para 'alinhar' esses textos a uma região específica da linha seria necessário definir um espaço ocupado pelo texto de cada elemento para conseguir fazer as contas e poder definir sua posição centralizado, direita, esquerda.

Para sua informação o browser sabe a largura da tela, se o texto cabe ou não na linha corrente. São recursos simples que ele utiliza para fazer o trabalho de exibição da página html da melhor maneira possível.

Outro fato importante é que o browser cuida de 'realinhar' os elementos da página de acordo com a 'tela' de exibição.
Redimensione o browser e veja como o texto é re-arranjado de acordo com a largura da página.

Portanto, alinhar uma coisa que não tem tamanho determinado é praticamente impossível no browser. Por isso envolvemos o texto ( que é inline ) em uma tag tipo bloco ( como uma div por exemplo, porque na tag bloco podemos definir dimensões como largura, altura, posicionamento.

Para destacar um texto comum de um sendo processado pelo recurso eu colocarei o fundo de cada texto processado por algum recurso com o fundo pink. Uma tag span com style="background-color:pink;

Texto comum

Aqui temos um exemplo de um texto comum sendo exibido pelo html: Como ele está cercado por tags parágrafo(p) ele é exibido em uma nova linha após a tab </p>

Texto comum sózinho na linha.

Vimos que o texto está alinhado à esquerda porque o browser escreve os textos da esquerda para a direita ( exceto nos idiomas árabes ).

Fonte: :
<span style="background-color:pink;">Texto comum sózinho na linha.</span>

A tag span não interfere com o posicionamento do texto mas sim com seu estilo, cor, etc.

tag center

A tag center não deveria ser mais ser usada em HTML mas como ela foi muito utilizada em sites no passado e é muito prático o seu uso duvido que algum dia tirem esse recurso.

Agora na linha abaixo temos um texto alinhado pela tag center:

tag center

Fonte: :
<center style="background-color:pink;">tag center</center>

Vemos que a linha acima um pequeno texto acabou ocupando a linha inteira, ou seja, podemos ver que a tag center transformou o texto de inline para block e aí conseguiu alinhar o texto ao centro da linha. A tag center fez o serviço mas impôs uma regra...só um elemento texto na linha.

---

E agora se temos um texto simples seguido de um outro texto, mas com uma tag center seguido de outro texto...como ficaria :

Texto Comum - tag center - Texto Comum

Se você está usando o Visual Studio Community Edition e como ele é um editor avançado de HTML ele deve informar um erro na tag acima informando que não é possivel usar a tag center entro de uma span. Com certeza essa informação é pertinente pois a tag center tenta converter o texto de inline para block para poder centralizar e a tag span é uma tag em linha. Sendo assim a tag span cancelaria a tag center por ser a tag container ( pai ou nível hierárquico superior ).

Código html usado: :
<span style="background-color:pink;"> Texto Comum - <center style="background-color:lightgreen;">tag center</center> - Texto Comum </span>

Podemos ver que a tag center não ajuda muito a não ser que o texto esteja sozinho em uma linha. A tag center acabou quebrando a linha como uma tag bloco faria.

Alinhando textos na tag div via style=text-align:center/left/right

Abaixo temos 3 tags divs com os estilos text-align como center(centro),left(esquerda) e right(direita).

Funciona mas novamente temos a quebra de linha provocada pela div, não conseguimos colocar os textos ou objetos na mesma linha.

Fonte: :
        <div style="text-align: center;">style - text align - center</div>
        <div style="text-align: left;">style - text align - left</div>
        <div style="text-align: right;">style - text al ign - right</div>

Se você trocar a tag div (que é bloco) pela tag span (que é inline), por exemplo, vai observar que o elemento acima não funciona, ou seja, diferentemente da tag center que impõe o estilo bloco nos seus elementos internos o estilo 'text-align' não é uma tag html mas sim um estilo e por esse motivo não consegue 'impor' um estilo bloco na linha e por esse motivo o estilo text-align só funcionará em tags tipo bloco.

Alinhando textos na tag span via estilo text-align - Constatação que não funciona

Como eu disse no texto acima deste documento as tags span são tipo 'em linha' sendo assim o browser não tem como saber o tamanho ou espaço ocupado pelo item e por esse motivo não sabe quanto ele ocupará e isso impossibilita o alinhamento dentro da página.

Texto comum - Texto dentro da SPAN com estilo centralizado - Texto comum

Não funciona porque a tag text e a tag div não tem tamanho definido (são do tipo inline) e o que resta da linha poderá ser utilizado por outra tag e por esse motivo o browser não admite alinhamentos.

fonte:
Texto comum - <span style="text-align:center">Texto dentro da SPAN com estilo centralizado</span> - Texto comum

---

Vou colocar um span dentro do outro e no mais externo vou colocar width:100%

Texto comum - Texto dentro da SPAN com estilo centralizado - Texto comum

Não funciona porque tanto o o texto como a tag span são inline e não tem definição de tamanho próprio e nem podemos definir porque elementos inline tem seu tamanho definido browser dinâmicamente.

Fonte:
<span style="width:100%">Texto comum - <span style="text-align:center">Texto dentro da SPAN com estilo centralizado</span> - Texto comum</span>

Float - Alinhando textos com tags div e estilo float:left/right

Como disse acima as tags div são em linha e cada uma delas é exibida em linhas diferentes. Mas ao aplicar o estilo float as tags div são exibidas com o estilo 'inline-block', ou seja, combina os estilos e linha e em bloco.

Sendo assim o estilo Float permite alinhar uma tag div ou à direita da página e na mesma linha.
Muito legal deste estilo é que a tag fica 'colada' ao alinhamento, ou seja, se eu tenho um elemento alinhado à direita pela tag float ele fica 'colado' à margem direita mesmo que você diminua a largura do browser e outras coisas colidam com ele...aí o browser coloca as coisas que 'iriam colidir' na linha seguinte e evita a colisão quando possível.

Style Float funcionou mas não existe elemento central, apenas alinhar a direita ou a esquerda e exige o estilo style=clear:both nas tags seguintes senão o espaço do float não seria computado e outras tags poderiam sobrescrever seu conteúdo.

Fonte:
<div style="float:left">Texto1</div>
<div style="float:right">Texto2</div>
<br style="clear:both" />

Se você colocar mais itens com o style=float alinhando a direita e a esquerda eles serão empilhados como no exemplo abaixo

Fonte:
<div style="float:left">Texto1</div>
<div style="float:right">Texto2</div>
<div style="float:left">Texto3</div>
<div style="float:right">Texto4</div>
<br style="clear:both" />

Agora faremos uma experiência...vamos formatar uma largura específica para o elemento 1 bem maior do que ele precisa para ver se funciona:

Muito bom...funcionou...coloquei o tamanho do texto 1 como 200 pixels e o outro elemento foi alinhado longe do primeiro elemento.

Fonte:
<div style="float:left;background-color:pink;width:200px; ">Texto1</div>
<div style="float: right;background-color: pink;">Texto2</div>
<div style="float:left;background-color:pink;">Texto3</div>
<div style="float: right; background-color: pink;">Texto4</div>
<br style="clear:both" />

O mais legal é que o estilo float funciona com site responsivo. Reduza a largura da tela e você verá que a tag alinhada a direita continuará sendo alinhada a direita da tela independentemente da largura da tela / browser.

Contudo não se esqueça do style="clear:both" no elemento logo após o float porque ele pede ao browser que veja o espaço ocupado pelo style float e ai os próximos elementos não ficarão encavalados ( renderizados juntos, no mesmo espaço ) dos elementos com estilo float.

Usando o estilo 'align-content:' dentro de uma div com os styles:

Não funcionam o alinhamento do texto dentro de uma tag div pelo estilo align-content, align-items, align-self, align-content. Veja o teste abaixo.

Fonte:
<div style="align-content:center;">Texto1</div>
<div style="align-items: center;">Texto2</div>
<div style="align-self:center;">Texto3</div>
<div style="align-content: center">Texto4</div>

Texto dentro de uma div - Utilizando o parametro align para alinhar o texto

Como uma div é uma tag bloco e ocupa uma linha inteira o browser saberá como alinhar cada um desses elementos.

Note que é um parâmetro da tag div chamado align e não o text-align que utilizamos no primeiro exemplo desta página.

Funciona mas tem o problema de que cada div é exibida em uma linha separada.

Fonte:
<div align="left">div - aling left - Alinhamento à esquerda</div>
<div align="center">div - aling center - Alinhamento no centro</div>
<div align="right">div - aling right - Alinhamento à direita</div>

Utilizando style="display:inline-block;width:33%" e align="right/center/left" na div

Como vimos nos exemplos acima as únicas maneiras de alinhar o texto numa linha é mudando a exibição da tag texto de em linha para bloco ou usando o estilo float.

Mas se uma tag bloco ( como a div ), que deveria ocupar uma linha inteira, eu pedisse para a css que ocupe apenas uma parte da linha e em seguida usasse o parâmetro align=left/center/right, funciona ? Veja o exemplo abaixo:

Nota : Funcionou perfeitamente para 3 itens e funcionaria para 4,5.
Utilize este método de preferência para alinhar textos na página.

Fonte:
<div style="display:inline-block;width:33%" align="left">div - aling left - Alinhamento à esquerda</div>
<div style="display:inline-block;width:33%" align="center">div - aling center - Alinhamento no centro</div>
<div style="display:inline-block;width:33%" align="right">div - aling right - Alinhamento à direita</div>

Cuidado com o a largura das colunas em porcentagem

Sabemos que a tela tem 100% da largura por default. Sendo assim vou criar 5 colunas com uma largura de 20% para cada div e veja só o resultado:

Pela lógica as 5 colunas com 20% cada deveriam ocupar 100% da tela. Contudo as tags estão dentro de containers ( tags superiores ) que formatam a largura da tela para menos de 100% e isto provocou o erro. Eu estou usando o bootstrap nesta página e todo o conteúdo dela está dentro de uma tag <div class="container"> o que coloca uma margem à direita e à esquerda da tela. Veja o novo exemplo com a correção de largura.

O que fiz foi nas 2 últimas divs colocar um tamanho de 19% ao invés de 20%. Isto corrigiu o erro causado pelo container do bootstrap.

Teste final : Tamanho do texto

E se o texto simplesmente não couber na área da div o que acontece ? Veja exemplo abaixo.

Quando formatei as divs com 19% e 20% o texto acabou não cabendo no tamanho da célula com isto o que não coube foi colocado na linha inferior.
Note que o estouro ( overflow ) foi deslocado verticalmente e o espaço horizontal ficou exatamente como definido por nós.

Fonte:
div style="display:inline-block;width:20%;background-color:pink;" align="left">div-aling left - Alinhamento à esquerda</div>
div style="display:inline-block;width:20%;background-color:pink;" align="center">div - aling center - Alinhamento no centro 1</div>
div style="display:inline-block;width:20%;background-color:pink;" align="center">div - aling center - Alinhamento no centro 2</div>
div style="display:inline-block;width:20%;background-color:pink;" align="center">div - aling center - Alinhamento no centro 3</div>
div style="display:inline-block;width:20%;background-color:pink;" align="right">div - aling right - Alinhamento à direita</div>

Fazendo outro teste...criando uma linha com 5 colunas texto mas usando o bootstrap

Falei que não ia usar o bootstrap mas acredito que todos bons programadores devem conhecer o básico dele. E o grid é um dos elementos do bootstrap que todos devem conhecer.

Se você não conhece o bootstrap ele divide a linha em partes iguais, se tiver uma coluna ocupa todo o espaço, se tiver 2 dados na linha divide em 50% e 50% para cada...se for 3...33% e assim por diante, automaticamente. E o mais legal é que o que antigamente no asp clássico era feito com tabelas hoje é feito com puro css, todas as colunas terão sempre o mesmo tamanho não importa seu conteúdo. Veja o exemplo abaixo:

Fonte:
<div class="container">
            <div class="row">
                <div class="col-sm"> style="background-color:pink;"
                    Coluna 1
                </div>
                <div class="col-sm" style="background-color:pink;">
                    Coluna 2
                </div>
                <div class="col-sm" style="background-color:pink;">
                    Coluna 3
                </div>
                <div class="col-sm" style="background-color:pink;">
                    Coluna 4
                </div>
                <div class="col-sm" style="background-color:pink;">
                    Coluna 5
                </div>
            </div>
        </div>

Por isso recomendamos muito o uso dos frameworks...muitos dos problemas que enfrentamos no dia-a-dia já estão resolvidos no bootstrap. Como exemplo, vou colocar outro exemplo com 8 colunas mas com o comprimento do texto diferente e veja como o bootstrap trata a diferença com elegância.

Nem sequer fica um espacinho entre as colunas. Se quiser que fique use a css padding ou margin para criar o isolamento.